<link rel="stylesheet" href="/assets/home/css/teacher_info.css">
<!-- 请求 -->
<script src="/assets/home/plugin/axios/axios.min.js"></script>
<script src="/assets/home/plugin/axios/request.js"></script>
<!-- 上拉刷新 -->
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>

<div class="header">
    <div class="left">
        <div class="avatar">
            <img src="{$info.avatar_text}" alt="">
        </div>
    </div>

    <div class="right">
        <div class="name">{$info.name}</div>
        <div class="course">课程：{$info.subject_text}</div>
        <div class="job">职位：{$info.job}</div>

        <div class="follow">
            {if condition="$info['follow_active']"}
            <button class="btn mui-btn-danger btn-follow">已关注</button>
            {else}
            <button class="btn mui-btn-primary btn-follow">关注</button>
            {/if}
        </div>
    </div>
</div>

<div class="content">{$info.content}</div>

<!-- 搜索框 -->
<div class="mui-input-row mui-search">
    <input id="keywords" type="search" placeholder="请输入课程名称" name="search" />
</div>

<!-- 课程列表 -->
<div id='subjectList' class="mescroll" style="height: 54vh;">
    <ul class="mui-table-view"></ul>
</div>

<!-- 底部 -->
{include file="common/footer" /}

<script>

    // 页码
    let page = 1;

    var mescroll = new MeScroll("subjectList", { //第一个参数"mescroll"对应上面布局结构div的id
        //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
        down: {
            callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        up: {
            callback: upCallback, //上拉加载的回调
            empty: {
                tip: "暂无相关数据~" //提示
            },
        }
    });

    //下拉刷新的回调
    function downCallback() {
        // 处理方式一: 重置mescroll内部变量(如mescroll.num=1和mescroll.hasNext=true), 自动触发upCallback
        mescroll.resetUpScroll();
        $("#subjectList ul").html('');
    }

    //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    async function upCallback(val) {
        page = val.num

        let result = await POST({
            url: `{:url('home/subject/index')}`, params: {
                page: page,
                keywords: $("#keywords").val(),
                teacherid: "{$info.id}"
            }
        });

        if (result.code == 0) {
            mui.toast(result.msg);
            mescroll.endBySize(0, 0);
            return false;
        }

        let list = result.data.list ?? [];
        let count = result.data.count ?? 0;

        //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
        //必传参数(当前页的数据个数, 总数据量)
        mescroll.endBySize(list.length, count);

        getPageData(list)
    }

    // 处理数据
    function getPageData(list) {
        let html = '';
        for (let i = 0; i < list.length; i++) {
            let item = list[i];
            html += `
                    <li class="mui-table-view-cell mui-media">
                        <a class="item" href="./details.html">
                            <div class="thumb">
                                <img class="img" src="${item.thumbs_text}">
                            </div>
                            <div class="info">
                                <h5 class="title">${item.title}</h5>
                                <p class="content mui-ellipsis">课程分类：${item.category.name ? item.category.name : '未知分类'}</p>
                                <p class="content mui-ellipsis">创建时间：${item.createTime_text}</p>
                                <p class="bottom">
                                    <span class="like mui-icon mui-icon-starhalf">
                                        <span>${item.likes_text}</span>
                                    </span>
                                    <span class="price">￥${item.price}</span>
                                </p>
                            </div>
                        </a>
                    </li>
                `;
        }
        $("#subjectList ul").append(html);
    }

    // 搜索
    $(document).keydown(function(event) {
        if (event.keyCode == 13) {
            downCallback();
        }
    });

    // 关注
    $(".btn-follow").click(async function() {
        let result = await POST({
            url: `{:url('home/teacher/follow')}`, params: {
                teacherid: "{$info.id}"
            }
        });

        mui.toast(result.msg);
        if (result.code === 0) {
            if (result.url) {
                setInterval(function () {
                    location.href = `{:url('home/index/login')}`;
                }, 1000);
            }

            return false;
        }

        setTimeout(() => {
            location.reload();
        }, 1000);
    });

    // 页面加载完成后, 自动触发一次上拉加载
    mescroll.upCallback();

</script>